<template>
    <!-- 顶部容器 -->
    <div class="top-container">
        <!-- 四个卡片 -->
        <!-- 卡片1-文章数 -->
        <el-card class="el-card" index="1" style="background-color: lightcoral">
            <div class="card-header">
                <span class="header-title">
                    <el-icon class="el-icon">
                        <Document style="color: black; height: 100%; width: 100%" />
                    </el-icon>&nbsp;文章数
                </span>
            </div>
            <div style="height: 10px"></div>
            <div class="card-info">
                <h1>{{ myAtricleData.length }}篇</h1>
            </div>
        </el-card>
        <!-- 卡片2-等待审核 -->
        <el-card class="el-card" index="2" style="background-color: lightskyblue">
            <div class="card-header">
                <span class="header-title">
                    <el-icon class="el-icon">
                        <View style="color: black; height: 100%; width: 100%" />
                    </el-icon>&nbsp;等待审核
                </span>
            </div>
            <div style="height: 10px"></div>
            <div class="card-info">
                <h1>{{ unpassArticleCount }}篇</h1>
            </div>
        </el-card>
        <!-- 卡片3-被赞次数 -->
        <el-card class="el-card" index="3" style="background-color: lightpink">
            <div class="card-header">
                <span class="header-title">
                    <el-icon class="el-icon">
                        <Star style="color: black; height: 100%; width: 100%" />
                    </el-icon>&nbsp;博文被赞次数
                </span>
            </div>
            <div style="height: 10px"></div>
            <div class="card-info">
                <h1>{{ likesCount }}次</h1>
            </div>
        </el-card>
        <!-- 卡片4-草稿箱 -->
        <el-card class="el-card" index="4" style="background-color: lightsalmon">
            <div class="card-header">
                <span class="header-title">
                    <el-icon class="el-icon">
                        <Bell style="color: black; height: 100%; width: 100%" />
                    </el-icon>&nbsp;草稿箱
                </span>
            </div>
            <div style="height: 10px"></div>
            <div class="card-info">
                <h1>{{ draftData.length }}篇</h1>
            </div>
        </el-card>
    </div>
    <!-- 菜单容器 -->
    <div class="menu-container">
        <!-- 菜单用于切换表格内容 -->
        <el-menu :default-active="tableIndex" class="el-menu" mode="horizontal" active-text-color="#ffd04b"
            @select="handleSelect">
            <el-menu-item index="1">我的收藏</el-menu-item>
            <el-menu-item index="2">我的文章</el-menu-item>
            <el-menu-item index="3">我的草稿</el-menu-item>
            <!-- <el-menu-item index="4">互动信息</el-menu-item> -->
        </el-menu>
    </div>
    <!-- 表格容器 -->
    <div class="table-container">
        <!-- 我的收藏 -->
        <el-table :data="BookmarkData" class="el-table-bookmark" v-if=showBookmark>
            <el-table-column label="创建时间" prop="date" sortable />
            <el-table-column label="文章标题" prop="title" />
            <el-table-column label="作者" prop="author" />
            <el-table-column align="right">
                <template #header>
                    <el-input v-model="search" size="small" placeholder="搜索文章或作者..." />
                </template>
                <template #default="scope">
                    <el-button size="small" @click="bookmark_handleEdit(scope.$index, scope.row)">
                        查看
                    </el-button>
                    <el-popconfirm title="确认要取消收藏?" cancel-button-text="取消" confirm-button-text="确认"
                        @confirm="bookmark_handleDelete(scope.$index, scope.row)">
                        <template #reference>
                            <el-button size="small" type="danger">
                                取消收藏
                            </el-button>
                        </template>
                    </el-popconfirm>

                </template>
            </el-table-column>
        </el-table>
        <!-- 我的文章 -->
        <el-table :data="MyArticleData" class="el-table-bookmark" v-if=showArticle>
            <el-table-column label="创建时间" prop="date" sortable />
            <el-table-column label="文章标题" prop="title" />
            <el-table-column label="状态" prop="status" />
            <el-table-column align="right">
                <template #header>
                    <el-input v-model="search" size="small" placeholder="搜索文章..." />
                </template>
                <template #default="scope">
                    <el-button size="small" @click="myArticle_handleEdit(scope.$index, scope.row)">
                        编辑
                    </el-button>
                    <el-popconfirm title="确认要删除这篇文章?" cancel-button-text="取消" confirm-button-text="确认"
                        @confirm="myArticle_handleDelete(scope.$index, scope.row)"><template #reference>
                            <el-button size="small" type="danger">
                                删除
                            </el-button>
                        </template></el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 我的草稿 -->
        <el-table :data="DraftData" class="el-table-bookmark" v-if=showDraft>
            <el-table-column label="创建时间" prop="date" sortable />
            <el-table-column label="文章标题" prop="title" />
            <el-table-column align="right">
                <template #header>
                    <el-input v-model="search" size="small" placeholder="搜索文章..." />
                </template>
                <template #default="scope">
                    <el-button size="small" @click="draft_handleEdit(scope.$index, scope.row)">
                        编辑
                    </el-button>
                    <el-popconfirm title="确认要删除这篇草稿?" cancel-button-text="取消" confirm-button-text="确认"
                        @confirm="draft_handleDelete(scope.$index, scope.row)"><template #reference>
                            <el-button size="small" type="danger">
                                删除
                            </el-button>
                        </template></el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <!-- <el-scrollbar height="450px" v-if=showMsg>
            <p v-for="item in 20" :key="item" class="scrollbar-item">&nbsp;&nbsp;&nbsp;&nbsp;第{{ item }}条互动消息</p>
        </el-scrollbar> -->
    </div>
</template>

<script lang="ts" setup>
    import {
        listBookmark,
        listArticle,
        listBlogById,
        listDraft,
        getUserById,
        deleteBookmark,
        deleteBlog,
    } from "@/api/index"
    import {
        Document,
        View,
        Star,
        Bell
    } from "@element-plus/icons-vue";
    import {
        ElDialog,
        ElMessage
    } from "element-plus";
    import {
        computed,
        ref
    } from "vue";

    let bloggerId = localStorage.getItem('userId');
    let tableIndex = ref("1");
    let showBookmark = ref(true);
    let showArticle = ref(false);
    let showDraft = ref(false);
    let bookmarkData = ref([]);
    let myAtricleData = ref([]);
    let blogData = ref([]);
    let draftData = ref([]);
    let unpassArticleCount = ref(0);
    let likesCount = ref(0);

    const search = ref("");
    const handleSelect = (key: string) => {
        tableIndex.value = key;

        if (tableIndex.value === "1") {
            showBookmark.value = true;
        } else {
            showBookmark.value = false;
        }

        if (tableIndex.value === "2") {
            showArticle.value = true;
        } else {
            showArticle.value = false;
        }

        if (tableIndex.value === "3") {
            showDraft.value = true;
        } else {
            showDraft.value = false;
        }
    };

    // bookmark表格

    interface Blog {
        id: number;
        date: string;
        title: string;
        user_id: string;
        blog_id: string;
        author: string;
    }
    const BookmarkData = computed(() =>
        bookmarkData.value.filter(
            (data) =>
            !search.value ||
            data.title.toLowerCase().includes(search.value.toLowerCase()) ||
            data.author.toLowerCase().includes(search.value.toLowerCase())
        )
    );
    const bookmark_handleEdit = (index: number, row: Blog) => {
        window.location.href = 'http://localhost:8080/blog?id=' + row.id;
    };
    const bookmark_handleDelete = (index: number, row: Blog) => {
        let data = {
            userId: bloggerId,
            blogId: blogData.value[index].blogId,
        };
        deleteBookmark(data).then((res) => {
            bookmarkData.value.splice(index, 1);
            ElMessage("取消收藏:" + row.title);
        });
    };

    listBookmark(bloggerId).then(
        res => {
            blogData.value = res.data;
            for (let i = 0; i < blogData.value.length; i++) {
                listBlogById(blogData.value[i].blogId).then(
                    res => {
                        bookmarkData.value[i] = res.data;
                        getUserById(bookmarkData.value[i].bloggerId).then(
                            res => {
                                bookmarkData.value[i].author = res.data.nickname;
                            }
                        )
                    }
                )
            }
        }
    );


    //article表格
    interface Article {
        id: number;
        date: string;
        title: string;
        status: string;
    }
    const MyArticleData = computed(() =>
        myAtricleData.value.filter(
            (data) =>
            !search.value ||
            data.title.toLowerCase().includes(search.value.toLowerCase())
        )
    );
    const myArticle_handleEdit = (index: number, row: Article) => {
        window.location.href = 'http://localhost:8080/editblog?id=' + row.id;
    };
    const myArticle_handleDelete = (index: number, row: Article) => {
        deleteBlog(row.id).then(
            res => {
                myAtricleData.value.splice(index, 1);
                ElMessage("删除成功:" + row.title);
            }
        )
    };

    listArticle(bloggerId).then(
        res => {
            myAtricleData.value = res.data;

            for (let i = 0; i < myAtricleData.value.length; i++) {
                likesCount.value += myAtricleData.value[i].likes;
                if (myAtricleData.value[i].status === 0 || myAtricleData.value[i].status === '0') {
                    myAtricleData.value[i].status = '草稿箱';
                } else if (myAtricleData.value[i].status === 1 || myAtricleData.value[i].status === '1') {
                    myAtricleData.value[i].status = '审核中';
                    unpassArticleCount.value++;
                } else if (myAtricleData.value[i].status === 2 || myAtricleData.value[i].status === '2') {
                    myAtricleData.value[i].status = '已发布';
                } else if (myAtricleData.value[i].status === 3 || myAtricleData.value[i].status === '3') {
                    myAtricleData.value[i].status = '审核驳回';
                }
            }
        }
    )


    //draft表格
    interface Draft {
        id: number
        date: string;
        title: string;
    }
    const DraftData = computed(() =>
        draftData.value.filter(
            (data) =>
            !search.value ||
            data.title.toLowerCase().includes(search.value.toLowerCase())
        )
    );
    const draft_handleEdit = (index: number, row: Draft) => {
        window.location.href = 'http://localhost:8080/editblog?id=' + row.id;
    };
    const draft_handleDelete = (index: number, row: Draft) => {
        deleteBlog(row.id).then(
            res => {
                draftData.value.splice(index, 1);
                ElMessage("删除草稿:" + row.title);
            }
        )
    };

    listDraft(bloggerId).then(
        res => {
            for (let i = 0; i < res.data.length; i++) {
                if (res.data[i].status === 0) {
                    draftData.value.push(res.data[i]);
                }
            }
        }
    )

</script>

<style scoped>
    .top-container {
        height: 160px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 30px;
        box-shadow: 0 0 1px 0 #000;
    }

    .el-card {
        height: 130px;
        width: 20%;
        /* border-color: black; */
        border-radius: 10px;
    }

    .header-title {
        display: flex;
        align-items: center;
        font-weight: 600;
    }

    .el-icon {
        width: 18px;
        height: 18px;
        display: flex;
        align-items: center;
    }

    .card-info {
        float: right;
    }

    .menu-container {
        height: 100px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .el-menu {
        width: 70%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 30px;
    }

    .table-container {
        width: 100%;
        height: 529px;
        display: flex;
        justify-content: center;
    }

    .el-table-bookmark {
        width: 65%;
    }

    .scrollbar-item {
        display: flex;
        align-items: center;
        /* justify-content: center; */
        height: 50px;
        width: 1000px;
        margin: 10px;
        text-align: center;
        border-radius: 4px;
        background: var(--el-color-primary-light-9);
        color: var(--el-color-primary);
    }
</style>